class numImage extends HTMLElement
{
    constructor()
    {
        super();
        this.fontsize = 15;
        this.width = this.height = 25;
    }
    connectedCallback()
    {
        var that = this;
        var data = JSON.parse(that.getAttribute("data"));
        that.style = "display:flex;";
        if(Object.prototype.toString.call(data) == "[object Array]")
        {
            data.forEach(item=>{
                var content = document.createElement('canvas');
                content.width = that.width;
                content.height = that.height;
                content.style = "margin:2px;";
                var ctx = content.getContext('2d');
                ctx.lineWidth = 2;
                ctx.strokeStyle = item.color;
                ctx.beginPath();
                ctx.arc(that.width/2,that.height/2,(that.width-ctx.lineWidth)/2,0,2*Math.PI);
                ctx.closePath();
                ctx.stroke();
                ctx.font = that.fontsize + "px serif";                
                ctx.fillText(item.value,that.width/2-item.value.length/2*that.fontsize/2,that.height/2+that.fontsize/2.8);
                that.appendChild(content);
            });
        }
        else
        {
            var contentx = document.createElement('canvas');
            contentx.width = that.width;
            contentx.height = that.height;
            contentx.style = "margin:2px;";
            var ctx = contentx.getContext('2d');
            ctx.lineWidth = 2;
            ctx.strokeStyle = data.color;
            ctx.beginPath();
            ctx.arc(that.width/2,that.height/2,(that.width-ctx.lineWidth)/2,0,2*Math.PI);
            ctx.closePath();
            ctx.stroke();
            ctx.font = that.fontsize + "px serif";
            ctx.fillText(data.value,that.width/2-that.fontsize/2,that.height/2+that.fontsize/2.8);
            that.appendChild(contentx);
        }
    }

}
window.customElements.define('num-image',numImage);